<script setup>
import { computed, reactive, ref, toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Type from '@components/search/type';
import Search from '@components/search/index';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';
import { Plus, Edit, Delete, View, Setting, TurnOff, Open, WarnTriangleFilled } from '@element-plus/icons-vue';
import { usePremission } from '@hooks';
import EditCom from './Edit';
// import Detail from './Detail';
// import Divide from './Divide';
// import riskControlSet from './riskControlSet';
import { tryOnMounted } from '@vueuse/shared';
import store, { STORE_KEY } from '@store';
import router from '../../router/index.js';
const premission = usePremission({
    edit: 'manager:org:update',
    delete: 'manager:org:delete'
});
const searchs = ref([
    {
        type: Type.SELECT2,
        key: 'name',
        width: 10,
        placeholder: '商户名称',
        data: [],
        nodeKey: 'name',
        props: {
            label: 'name',
        },
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON,
    },
]);

const pageRef = ref();
const tableRef = ref();
const editRef = ref();
const detailRef = ref();
const divideRef = ref();
const riskControlSetRef = ref();
const state = reactive({
    companyIds: [],
    labelNames: [],
});
const companyCode = computed(() => store.getters.user);

let queryForm = reactive({});
// code: (companyCode.value.companyCode = 'platform' ? '' : companyCode.value.companyCode),
const onSearch = param => {
    delete param.time;
    queryForm = param;
    pageRef.value.refresh();
};

const getTree = async () => {
    const res = await service.auth.osysorgTree();
    if (res.resultCode == 8200) {
        searchs.value[0].data = res.data || [];
    }
};
getTree();
const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.auth.orgPage(pageNum, pageSize, queryForm);
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};
const deleteBtn = async id => {
    const res = await service.auth.orgDelete({ id: id });
    if (res.resultCode == 8200) {
        searchs.value[0].data = res.data;
        pageRef.value.refresh(true);
        ElMessage.success('删除成功');
    }
};
const statusBtn = async (type, id) => {
    const res = await service.auth.orgUpdate({ status: type, id: id });
    pageRef.value.refresh(true);
};
const goPosition = orgGroupsName => {
    router.push({
        name: 'TXZ_position',
        // path: '/framework/position/management',
        // query: { orgGroupsName: orgGroupsName },
        // params:{ orgGroupsName: orgGroupsName,'a':1 }
        // state:{ orgGroupsName: orgGroupsName,'a':1 }
    });
    window.sessionStorage.setItem( 'orgGroupsName', orgGroupsName)
    // "/framework/position/management?orgGroupsName="+orgGroupsName)
};
const width = (function (premission) {
    let width = 24;
    premission.view && (width += 33);
    premission.edit && (width += 33);
    premission.delete && (width += 33);
    return Math.max(width, 80);
})(premission);
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <div class="margin-bottom10">
            <el-button type="primary" :icon="Plus" @click="editRef.open('新增', {}, searchs[0].data)">新增机构</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table class="mytable-scrollbar" ref="tableRef" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, premission.add ? 2 : 1)" highlight-hover-row align="center" round stripe border>
                    <vxe-column field="name" title="机构名称" width="150" />
                    <vxe-column field="price" title="余额" width="150" />
                    <vxe-column field="unitPrice" title="进件单价" width="150" />
                    <vxe-column field="orgCode" title="唯一编码" width="150" />
                    <vxe-column title="机构组别" width="150">
                        <template #default="{ row }">
                            <span class="pointerText" @click="goPosition(row.orgGroupsName)">{{ row.orgGroupsName }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="dailyPushNumber" title="每日分配数量" width="170" />
                    <vxe-column title="状态" width="100">
                        <template #default="{ row }" v-if="premission.edit">
                            <el-popconfirm  title="确定开启该机构？" v-if="row.status == 0" @confirm="statusBtn(1, row.id)">
                                <template #reference>
                                    <span class="pointerText closeText">停用</span>
                                </template>
                            </el-popconfirm>
                            <el-popconfirm  title="确定关闭该机构？" v-else @confirm="statusBtn(0, row.id)">
                                <template #reference>
                                    <span class="pointerText openText">正常</span>
                                </template>
                            </el-popconfirm>
                        </template>
                    </vxe-column>
                    <vxe-column title="操作" :min-width="width + 88" fixed="right">
                        <template #default="{ row }">
                            <section class="operateBtn">
                                <span v-if="premission.edit" @click="editRef.open('编辑', row, searchs[0].data)">编辑</span>
                                <b v-if="premission.edit&&premission.delete">|</b>
                                <span v-if="premission.delete" @click="deleteBtn(row.id)">删除</span>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <edit-com ref="editRef" @refresh="flag => pageRef.refresh(flag)" @getTree="getTree()" />
    </section>
</template>
<style lang="scss" scoped>
.closeText{
    color: rgba(255, 0, 0, 0.7);
}
.openText{
    color: rgb(14, 154, 14);
}
.operateBtn {
    display: flex;
    justify-content: space-evenly;
    color: #ccc;
    padding: 0px 20px;
    span {
        color: orangered;
        cursor: pointer;
    }
}
.pointerText {
    cursor: pointer;
}
</style>
